<template>
	<div class="avue-top">
		<div class="top-bar__left">
			<div class="avue-breadcrumb" :class="[{ 'avue-breadcrumb--active': isCollapse }]"
				v-if="setting.collapse&&!isHorizontal">
				<i class="icon-navicon" @click="setCollapse"></i>
			</div>
		</div>
		<div class="top-bar__title">
			<div class="top-bar__item top-bar__item--show" v-if="setting.menu">
				<top-menu ref="topMenu"></top-menu>
			</div>
			<!-- <span class="top-bar__item"
            v-if="setting.search">
        <top-search></top-search>
      </span> -->
		</div>
		<div class="top-bar__right">
			<el-tooltip v-if="setting.theme" effect="dark" :content="$t('navbar.theme')" placement="bottom">
				<div class="top-bar__item top-bar__item--show">
					<top-theme></top-theme>
				</div>
			</el-tooltip>
			<!-- <el-tooltip effect="dark"
                  :content="$t('navbar.notice')"
                  placement="bottom">
        <div class="top-bar__item top-bar__item--show">
          <top-notice></top-notice>
        </div>
      </el-tooltip> -->
			<el-tooltip effect="dark" :content="$t('navbar.language')" placement="bottom">
				<div class="top-bar__item top-bar__item--show">
					<top-lang></top-lang>
				</div>
			</el-tooltip>
			<el-tooltip v-if="setting.fullscren" effect="dark"
				:content="isFullScren?$t('navbar.screenfullF'):$t('navbar.screenfull')" placement="bottom">
				<div class="top-bar__item">
					<i :class="isFullScren?'icon-tuichuquanping':'icon-quanping'" @click="handleScreen"></i>
				</div>
			</el-tooltip>
			<img class="top-bar__img" :src="userInfo.avatar">
			<el-dropdown>
				<span class="el-dropdown-link">
					{{userInfo.username}}
					<i class="el-icon-arrow-down el-icon--right"></i>
				</span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item @click.native="logout" divided>{{$t('navbar.logOut')}}</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
		</div>
	</div>
</template>
<script>
	import {
		resetRouter
	} from '@/router/router'
	import {
		mapGetters
	} from "vuex";
	import {
		fullscreenToggel,
		listenfullscreen
	} from "@/util/util";
	import topLock from "./top-lock";
	import topMenu from "./top-menu";
	import topSearch from "./top-search";
	import topTheme from "./top-theme";
	import topLogs from "./top-logs";
	import topColor from "./top-color";
	import topNotice from './top-notice'
	import topLang from "./top-lang";
	import request from '@/router/axios';
	import {
		baseUrl
	} from '@/config/env';
	export default {
		components: {
			topLock,
			topMenu,
			topSearch,
			topTheme,
			topLogs,
			topColor,
			topNotice,
			topLang
		},
		name: "top",
		data() {
			return {
				userInfo:[],
			};
		},
		filters: {},
		created() {
			this.getUserinfo();
		},
		mounted() {
			listenfullscreen(this.setScreen);
		},
		computed: {
			...mapGetters([
				"setting",
				"isFullScren",
				"tagWel",
				"tagList",
				"isCollapse",
				"tag",
				"logsLen",
				"logsFlag",
				"isHorizontal",
			])
		},
		methods: {
			getUserinfo(){
				let that=this;
				request({
						headers: {
							'Content-Type': 'application/json;charset=utf-8'
						},
						method: 'post',
						url: baseUrl + '/api/user/userinfo',
					})
					.then(function(response) {
						console.log(response.data);
						if (response.data.status == 0) {
							that.$message.error(response.data.info)
						} else if (response.data.status == 1) {
							that.userInfo=response.data.data;
						}
					})
					.catch(function(error) {
						console.log(error);
						that.$message.error('系统错误')
					});
			},
			
			handleScreen() {
				fullscreenToggel();
			},
			setCollapse() {
				this.$store.commit("SET_COLLAPSE");
			},
			setScreen() {
				this.$store.commit("SET_FULLSCREN");
			},
			logout() {
				this.$confirm(this.$t("logoutTip"), this.$t("tip"), {
					confirmButtonText: this.$t("submitText"),
					cancelButtonText: this.$t("cancelText"),
					type: "warning"
				}).then(() => {
					this.$store.dispatch("LogOut").then(() => {
						resetRouter();
						this.$router.push({
							path: "/login"
						});
					});
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
</style>
